<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /**
         * 1：使用 Vue.set(object, propertyName, value)（推荐）
         * 
         * import Vue from 'vue';
            // 在组件方法中
            methods: {
            addNewProperty() {
                // 向 data 中的某个对象添加新属性
                Vue.set(this.someObject, 'newProperty', 'newValue');
                
                // 或者添加到根 data
                Vue.set(this.$data, 'newRootProperty', 'rootValue');
            }
            }
         * 
            2
                方法 2：使用 this.$set（实例方法，等价于 Vue.set）
                methods: {
                    addNewProperty() {
                        // 向对象添加属性
                        this.$set(this.user, 'age', 25);
                        
                        // 向数组添加元素（索引方式）
                        this.$set(this.list, 0, 'first item');
                    }
                }

            3 方法 3：使用 Object.assign 或 扩展运算符（...）替换整个对象
                methods: {
                    addNewProperty() {
                        // 替换整个对象，触发响应式更新
                        this.someObject = Object.assign({}, this.someObject, {
                        newProperty: 'newValue',
                        another: 'value'
                        });

                        // 或使用扩展运算符（ES6+）
                        this.someObject = {
                        ...this.someObject,
                        newProperty: 'newValue'
                        };
                }
}
         * **/ 
    </script>
</body>
</html>